<template>
  <div class="container">
    <div class="header">
      <div class="title">水上桥区管控</div>
      <div class="menu">
        <div class="item" @click="router.push({ path: '/bridgeIndex' })">总体概况</div>
        <div class="item active">桥区日常管理</div>
      </div>
    </div>
    <div class="main">
      <div class="left-content">
        <div
          style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;margin-bottom: 10px; width: 620px;height:350px">
          <div class="title">桥梁信息</div>
          <div class="subtitle">
            <div style="display: flex;">
              <div class="line"></div>
              <div class="name">基本信息</div>
            </div>
            <div class="more" @click="baseInfoDialogVisible = true">更多</div>
          </div>
          <div class="image">
            <img :src="picUrl" v-if="picUrl" @error="imgError">
            <div class="no-image" v-else>
              <img src="../../assets/images/pc/error.png">
              <div class="name">暂无图片</div>
            </div>
            <div class="btn" v-if="haveLink" @click="goLink">
              三维
            </div>
          </div>
          <div class="base-info">
            <div class="left-info">
              <div class="name">{{ bridgeBaseInfoData.bridgeName || "--" }}</div>
              <div class="address">
                <img src="../../assets/images/pc/address-icon.png" alt="">
                <div>
                  <span class="text">地理位置：</span>
                  <span class="value">{{ bridgeBaseInfoData.cAddress || "--" }}</span>
                </div>
              </div>
            </div>
            <div class="right-info">
              <div class="name">净高是否达标：</div>
              <div class="value" :style="bridgePortraitData?.isDabiao === '不达标' ? 'color:#262626;':''">
                {{ bridgePortraitData?.isDabiao || "--" }}
              </div>
            </div>
          </div>
        </div>
        <div
          style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;margin-bottom: 10px;height:300px">
          <div class="subtitle">
            <div style="display: flex;">
              <div class="line"></div>
              <div class="name">通航孔</div>
            </div>

          </div>
          <div class="hole-info">
            <div class="hole-item">
              <div class="name">单向/双向通行</div>
              <div class="value" v-if="tonghangkong.length">
                {{ tonghangkong[0]?.tonghangkGz || "--" }}/{{ tonghangkong[1]?.tonghangkGz || "--" }}
              </div>
              <div class="value" v-else>--/--</div>
            </div>
            <div class="hole-item">
              <div class="name">通航孔数量</div>
              <div class="value">{{ bridgeHoleData.tonghangnum || "--" }}个</div>
            </div>
            <div class="hole-item">
              <div class="name">设计最高通航水位</div>
              <div class="value">{{ bridgeHoleData.shejizuigao || "--" }}m</div>
            </div>
            <div class="hole-item">
              <div class="name">实时通航净高</div>
              <div class="value">{{ bridgeHoleData.shicetongh || "--" }}m</div>
            </div>
          </div>
        </div>
        <div
          style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;margin-bottom: 10px;height:240px">
          <div class="count-info">
            <div class="count-item" style="width: 30%;margin-right: 2%;background-color: rgb(252, 252, 252);border-radius: 10px;
          border: 2px solid rgba(128, 128, 128, 0.08);">
              <div class="top">
                <div class="name">桥区船舶密度</div>
              </div>
              <div class="bottom">
                <div class="bottom-item">
                  <div class="name">上月船舶流量</div>
                  <div class="value" style="color: #262626;font-size:20px;">{{ density }}</div>
                </div>
              </div>
            </div>
            <div class="count-item" style="width: 68%;background-color: rgb(252, 252, 252);border-radius: 10px;
          border: 2px solid rgba(128, 128, 128, 0.08);">
              <div class="top" style="justify-content: space-between;padding: 0 16px;">
                <div class="name">预警情况</div>
                <div class="more" @click="() => { earlyWarningDialogVisible = true; yawStatisticsFn(); }">更多</div>
              </div>
              <div class="bottom">
                <div class="bottom-item w33 br1">
                  <div class="name">超高统计</div>
                  <div class="value">{{ chaogaoAlarm }}</div>
                </div>
                <div class="bottom-item w33 br1">
                  <div class="name">超速统计</div>
                  <div class="value">{{ chaosuAlarm }}</div>
                </div>
                <div class="bottom-item w33">
                  <div class="name">偏航统计</div>
                  <div class="value">{{ pianhangAlarm }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;height: 240px;
">
          <div class="subtitle">
            <div style="display: flex;">
              <div class="line"></div>
              <div class="name">水位情况</div>
            </div>
            <el-select v-model="water" placeholder="请选择" size="small">
              <el-option v-for="item in waterOptions" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </div>
          <div class="water-info">
            <div class="water-level">实时水位：<span class="value">{{ newWaterData[0]? newWaterData[0].swz : "--" }}</span>米
            </div>
            <div class="tips">国家1985高程基准</div>
            <div class="update-time">更新时间：{{ newWaterData[0]? newWaterData[0].time : "--" }}</div>
          </div>
          <div class="blueprint">
            <div class="blueprint-item" @click="ElMessage.error('暂无图纸')" style="margin-right: 16px;">
              <div class="name">
                <img src="../../assets/images/pc/sjtz-icon.png" alt="">
                <div>设计图纸</div>
              </div>
              <img src="../../assets/images/pc/more-icon.png" style="padding-right: 16px;">
            </div>
            <div class="blueprint-item" @click="planUrl?viewPlan():ElMessage.error('暂无方案')">
              <div class="name">
                <img src="../../assets/images/pc/yqyfa-icon.png" alt="">
                <div> 一桥一方案</div>
              </div>
              <img src="../../assets/images/pc/more-icon.png" style="padding-right: 16px;">
            </div>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <div class="map">
          <OlArc ref="OlArcRef"></OlArc>
          <div class="choose">
            <el-select v-model="bridge" filterable placeholder="请选择" @change="bridgeChange">
              <el-option v-for="item in bridgeOptions" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </div>
        </div>
        <div
          style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;margin-bottom:10px;margin-top: 231px;width: 1260px;">
          <div style="display: flex;margin-left: 18px;margin-top: 10px;">
            <div class="line"></div>
            <div class="title">桥区航道</div>
          </div>
          <div class="info">
            <div style="display: flex;margin-left: 120px;">
              <div class="info-item" style="margin: 8px 16px 16px 16px;">
                <div class="item-title">
                  <div class="name">基本信息</div>
                  <div class="more" @click="channelBaseInfoDialogVisible = true">更多</div>
                </div>
                <div class="first-info">
                  <div class="top">
                    <div class="name">{{ waterwayBaseInfoData.channelName || "--" }}</div>
                    <div class="value">{{ waterwayBaseInfoData.cWeihudj || "--" }}级</div>
                  </div>
                  <div class="bottom">
                    <div class="name">航标总数</div>
                      <div class="value">{{ waterwayBaseInfoData.hbNum || "--" }}</div>
                  </div>
                </div>
              </div>
              <div class="info-item" style="margin: 8px 16px 16px 0px;">
                <div class="item-title">
                  <div class="name">维护情况</div>
                </div>
                <div class="second-info">
                  <div>
                    <div class="name">维护水深(m)</div>
                    <div class="value">{{ waterwayBaseInfoData.weihuDeep || "--" }}</div>
                  </div>
                  <div>
                    <div class="name">维护宽度(m)</div>
                    <div class="value">{{ waterwayBaseInfoData.weihuWeigth || "--" }}</div>
                  </div>
                  <div>
                    <div class="name">维护弯曲半径(m)</div>
                    <div class="value">{{ waterwayBaseInfoData.wanquRadius || "--" }}</div>
                  </div>
                </div>
              </div>
              <div class="info-item" style="margin: 8px 0px 16px 0px;">
                <div class="item-title">
                  <div style="display:flex;">
                    <div class="name">水位情况</div>
                  </div>
                  <div class="more" @click="openWaterLevelDialog">更多</div>
                  <el-select  v-model="water1" placeholder="请选择" size="small" @change="getNewWaterFn1"
                    style="width:120px;margin-left: 110px;position: absolute;">
                    <el-option v-for="item in waterOptions1" :key="item.point" :label="item.point"
                      :value="item.point" />
                  </el-select>
                </div>
                <div class="third-info">
                  <div class="water-level">实时水位：{{ getNewWaterData?.swz }}米</div>
                  <div class="tips">
                    <div>国家1985高程基准</div>
                    <div>更新时间：{{ getNewWaterData?.time || "--" }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;margin-left: 120px;">
              <div class="info-item" style="margin: 0px 16px 16px 16px;">
                <div class="item-title">
                  <div class="name">巡检情况</div>
                  <div class="more" @click="routingInspectionDialogVisible = true">更多</div>
                </div>
                <div class="fourth-info">
                  <div class="name">巡检里程数：</div>
                  <div class="value">{{ xcMile || "--" }}公里</div>
                </div>
              </div>
              <div class="info-item" style="margin: 0px 16px 16px 0px;">
                <div class="item-title">
                  <div class="name">船舶流量</div>
                  <div class="more" @click="hdCbllDetailFn">更多</div>
                  <div class="point">观测点：{{ hdCbllData.name }}</div>
                </div>
                <div class="fifth-info">
                  <div>
                    <div class="name">3000吨以上船舶</div>
                    <div class="value">{{ hdCbllData.dayu || "--" }}</div>
                  </div>
                  <div>
                    <div class="name">3000吨以下船舶</div>
                    <div class="value">{{ hdCbllData.xiaoyu || "--" }}</div>
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-title">
                  <div class="name">关联桥梁</div>
                  <div class="more" @click="associatedBridgeDialogVisible = true">更多</div>
                </div>
                <div class="sixth-info">
                  <div class="value">{{ associationBgData.num || "--" }}座</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;margin-bottom: 10px; width:1260px;">
          <div style="display: flex;margin-left: 18px; margin-top: 10px;">
            <div class="line"></div>
            <div class="title">航道通告</div>
          </div>
          <div class="notice-list">
            <template v-if="waterwayNoticeData.length">
              <div class="notice-item" v-for="(item,index) in waterwayNoticeData" :key="index"
                @click="seeNotice(item.contents)">
                {{ item.title }}
              </div>
            </template>
            <div class="no-list" v-else>暂无通告</div>
          </div>
        </div>

      </div>
      <div class="right-content">
        <div
          style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;margin-bottom: 10px;width: 620px;height:380px">
          <div class="title">船舶通航</div>
          <div class="subtitle">
            <div style="display: flex;">
              <div class="line"></div>
              <div class="name">船舶总体态势分析</div>
            </div>
            <el-radio-group v-model="radio1" @change="radio1Change">
              <el-radio-button label="当日" value="当日" />
              <el-radio-button label="当周" value="当周" />
              <el-radio-button label="当月" value="当月" />
              <el-radio-button label="当年" value="当年" />
            </el-radio-group>
          </div>
          <div class="item">
            <div class="count">
              <div class="count-info">
                <div class="count-item" style="margin-bottom: 24px;">
                  <div class="name">船舶总数（艘）</div>
                  <div class="value">{{ totalShip }}</div>
                </div>
                <div class="count-item">
                  <div class="name">船舶总载货吨（万吨）</div>
                  <div class="value">{{ totalShipLoad }}</div>
                </div>
              </div>
              <div id="first-chart" style="height: 236px;width: 300px;margin-top: 10px;"></div>
            </div>
          </div>
        </div>

        <div
          style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;margin-bottom: 10px;height:380px">
          <div class="subtitle">
            <div style="display: flex;">
              <div class="line"></div>
              <div class="name">船舶流量态势分析</div>
            </div>
            <el-select v-model="count" placeholder="请选择" size="small" @change="shipllAnalysFn">
              <el-option v-for="item in countOptions" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="item">
            <div class="radio-group">
              <el-radio-group v-model="radio2" @change="shipllAnalysFn">
                <el-radio-button label="当日" value="当日" />
                <el-radio-button label="当周" value="当周" />
                <el-radio-button label="当月" value="当月" />
                <el-radio-button label="当年" value="当年" />
              </el-radio-group>
            </div>
            <div id="second-chart" style="height: 216px;"></div>
          </div>
        </div>
        <div
          style="background: #f7fbff; border-width: 2px; border-style: solid; border-color: #7db9e469;margin-bottom: 10px;height:380px">
          <div class="subtitle">
            <div style="display: flex;">
              <div class="line"></div>
              <div class="name">观测船舶趋势及预测图</div>
            </div>
            <el-select v-model="type" placeholder="请选择" size="small">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="item">
            <div v-show="type === '1'">
              <div class="radio-group">
                <el-radio-group v-model="radio3" @change="shipTrendFn()">
                  <el-radio-button label="日" value="日" />
                  <el-radio-button label="月" value="月" />
                </el-radio-group>
              </div>
              <div id="third-chart" style="width: 601px; height: 283px;"></div>
            </div>
            <div v-show="type === '2'">
              <div class="radio-group">
                <el-radio-group v-model="radio4" @change="shipTrendFn()">
                  <el-radio-button label="日" value="日" />
                  <el-radio-button label="月" value="月" />
                </el-radio-group>
              </div>
              <div id="fourth-chart" style="height: 216px;width: 464px;"></div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- 桥梁信息-基本信息 -->
    <el-dialog v-model="baseInfoDialogVisible" title="基本信息" width="640" class="my-dialog">
      <div class="base-info-list">
        <div class="list-item">
          <div class="name">桥梁名称</div>
          <div class="value">{{ bridgeBaseInfoData.bridgeName || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">桥梁类型</div>
          <div class="value">{{ bridgeBaseInfoData.cBridgelx || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">建设单位</div>
          <div class="value">{{ bridgeBaseInfoData.cBridgegldw || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">地理位置</div>
          <div class="value">{{ bridgeBaseInfoData.cAddress || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">所属航道</div>
          <div class="value">{{ bridgeBaseInfoData.cHangdao || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">所在航道等级</div>
          <div class="value">{{ bridgeBaseInfoData.hangdaoLevel || "--" }}</div>
        </div>
      </div>
    </el-dialog>
    <!-- 预警情况 -->
    <el-dialog v-model="earlyWarningDialogVisible" title="预警情况" width="1080" class="my-dialog">
      <div class="view-chart">
        <div class="chart">
          <div class="name">偏航统计</div>
          <div id="fifth-chart1"></div>
        </div>
        <div class="chart">
          <div class="name">超高统计</div>
          <div id="fifth-chart2"></div>
        </div>
        <div class="chart" style="width: 100%;">
          <div class="name">超速统计</div>
          <div id="fifth-chart3"></div>
        </div>
      </div>
    </el-dialog>
    <!-- 桥区航道-基本信息 -->
    <el-dialog v-model="channelBaseInfoDialogVisible" title="基本信息" width="640" class="my-dialog">
      <div class="base-info-list">
        <div class="list-item">
          <div class="name">所在航道名称</div>
          <div class="value">{{ waterwayBaseInfoData.channelName }}</div>
        </div>
        <div class="list-item">
          <div class="name">距离航道起点里程</div>
          <div class="value">{{ waterwayBaseInfoData.hdMile }}公里</div>
        </div>
        <div class="list-item">
          <div class="name">航道管养单位</div>
          <div class="value">{{ waterwayBaseInfoData.bmPname }}</div>
        </div>
        <div class="list-item">
          <div class="name">航道发展规划技术等级</div>
          <div class="value">{{ waterwayBaseInfoData.jishuLvl }}</div>
        </div>
        <div class="list-item">
          <div class="name">航道现状技术等级</div>
          <div class="value">{{ waterwayBaseInfoData.cWeihudj }}级</div>
        </div>
        <div class="list-item">
          <div class="name">航道维护类别</div>
          <div class="value">{{ waterwayBaseInfoData.weihulb }}</div>
        </div>
        <div class="list-item">
          <div class="name">航标总数</div>
          <div class="value">{{ waterwayBaseInfoData.hbNum }}</div>
        </div>
        <!-- <div class="list-item">
          <div class="name">设标里程</div>
          <div class="value">{{ waterwayBaseInfoData.shebiaoMile }}公里</div>
        </div> -->
        <div class="list-item">
          <div class="name">航标配布类型</div>
          <div class="value">{{ waterwayBaseInfoData.hangbiaopeibuType }}</div>
        </div>
        <!-- <div class="list-item">
          <div class="name">水文站数量</div>
          <div class="value">{{ waterwayBaseInfoData.waterwayStation }}个</div>
        </div> -->
      </div>
    </el-dialog>
    <!-- 桥区航道-水位情况 -->
    <el-dialog v-model="waterLevelDialogVisible" title="水位情况" width="1080" class="my-dialog">
      <div class="water-level-condition">
        <div class="top">
          <el-select v-model="water1" placeholder="请选择" size="small" @change="water1Change">
            <el-option v-for="item in waterOptions1" :key="item.point" :label="item.point" :value="item.point" />
          </el-select>
          <div class="tips">国家1985高程基准</div>
        </div>
        <div class="count">
          <div class="left-part">
            <div class="water-value">实时水位：{{ getNewWaterData?.swz }}米</div>
            <div class="update-time">更新时间：{{ getNewWaterData?.time || "--" }}</div>
          </div>
          <div class="right-part">
            <div class="item" style="border-right: 1px solid #D9D9D9;">
              <div class="water-info">
                <img src="../../assets/images/pc/high-water-icon.png" alt="">
                <div class="name">历史最高水位：</div>
                <div class="value">{{ theHighLowData[0]?.swz?.toFixed(1) || "--" }}米</div>
              </div>
              <div class="time">
                <img src="../../assets/images/pc/time-icon.png" alt="">
                <div>时间：{{ theHighLowData[0]?.time || "--" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="water-info">
                <img src="../../assets/images/pc/low-water-icon.png" alt="">
                <div class="name">历史最低水位：</div>
                <div class="value">{{ theHighLowData[1]?.swz?.toFixed(1) || "--" }}米</div>
              </div>
              <div class="time">
                <img src="../../assets/images/pc/time-icon.png" alt="">
                <div>时间：{{ theHighLowData[1]?.time || "--" }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="line-chart">
          <div class="chart">
            <div class="name">当日水位监测</div>
            <div id="sixth-chart1"></div>
          </div>
          <div class="chart">
            <div class="name">每日八时水位情况</div>
            <div id="sixth-chart2"></div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 巡检情况 -->
    <el-dialog v-model="routingInspectionDialogVisible" title="巡检情况" width="1080" class="my-dialog">
      <div class="routing-inspection">
        <div class="item" style="width: 100%;">
          <div class="name">航标情况</div>
          <div class="count">
            <div class="top-part">
              <div class="top-item br1">
                <div class="top-name">桥航标数</div>
                <div class="value">{{ navigationSituationData.qiaohanbiao || "--" }}</div>
              </div>
              <div class="top-item br1">
                <div class="top-name">桥柱灯数</div>
                <div class="value">{{ navigationSituationData.qiaozhudeng || "--" }}</div>
              </div>
              <div class="top-item br1">
                <div class="top-name">桥区浮标数</div>
                <div class="value">{{ navigationSituationData.fubiao || "--" }}</div>
              </div>
              <div class="top-item">
                <div class="top-name">其他航标数</div>
                <div class="value">{{ navigationSituationData.other || "--" }}</div>
              </div>
            </div>
            <div class="bottom-part">
              <div class="bottom-item br1">
                <div class="bottom-name">在线率</div>
                <div class="value">{{ navigationSituationData.normalRate || "--" }}</div>
              </div>
              <div class="bottom-item">
                <div class="bottom-name">异常数</div>
                <div class="value">{{ navigationSituationData.hangbiaoAbnormal || "--" }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" style="margin-right: 2%;">
          <div class="name">巡查情况</div>
          <div class="info">
            <div class="info-item">
              <div class="info-name">巡查时间：</div>
              <div class="value">{{ xcqkData.xcTime || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">巡查里程数：</div>
              <div class="value">{{ xcqkData.mile || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">总结：</div>
              <div class="value">{{ xcqkData.zongjie || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">障碍物异常：</div>
              <div class="value">{{ xcqkData.zhangaiwuyc || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">出浅异常：</div>
              <div class="value">{{ xcqkData.chugianyc || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">违法情况：</div>
              <div class="value">{{ xcqkData.weifagk || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">巡查人员：</div>
              <div class="value">{{ xcqkData.xcMenber || "--" }}</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="name">
            <div>巡检记录</div>
            <div class="back" v-show="isShowDetails" @click="isShowDetails = false">
              <img src="../../assets/images/pc/back-icon.png" alt="">
              <div>返回</div>
            </div>
          </div>
          <div class="table" v-show="!isShowDetails">
            <el-table :data="xcjlData">
              <el-table-column prop="cBummc" label="单位名称" />
              <el-table-column prop="nXunhcs" label="巡检次数" />
              <el-table-column prop="xcTime" label="巡检时间" width="160" />
              <el-table-column prop="mile" label="巡查里程" />
              <el-table-column prop="address" label="操作">
                <template #default="scope">
                  <div class="btn" @click="detailsFn(scope.row)">详情</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="details" v-show="isShowDetails">
            <div class="info">
              <div class="info-item">
                <div class="info-name">巡查时间：</div>
                <div class="value">{{ details.xcTime || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">巡查里程数：</div>
                <div class="value">{{ details.mile || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">总结：</div>
                <div class="value">{{ details.zongjie || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">障碍物异常：</div>
                <div class="value">{{ details.zhangaiwuyc || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">出浅异常：</div>
                <div class="value">{{ details.chugianyc || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">违法情况：</div>
                <div class="value">{{ details.weifagk || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">巡查人员：</div>
                <div class="value">{{ details.xcMenber || "--" }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 船舶流量 -->
    <el-dialog v-model="shipFlowDialogVisible" title="船舶流量" width="1080" class="my-dialog">
      <div class="view-chart">
        <div class="chart" style="width: 30%;">
          <div class="name">通航情况</div>
          <div id="seventh-chart1"></div>
          <div class="value">{{ seriesData1[0] || "--" }}</div>
        </div>
        <div class="chart" style="width: 30%;">
          <div class="name">各观察点船型统计</div>
          <div id="seventh-chart2"></div>
        </div>
        <div class="chart" style="width: 40%;">
          <div class="name">各观察点月船舶流量分析</div>
          <div id="seventh-chart3"></div>
        </div>
        <div class="chart" style="width: 100%;">
          <div class="name">各观察点月船舶吨位统计</div>
          <div id="seventh-chart4"></div>
        </div>
      </div>
    </el-dialog>
    <!-- 关联桥梁 -->
    <el-dialog v-model="associatedBridgeDialogVisible" title="关联桥梁" width="640" class="my-dialog">
      <div class="associated-list">
        <div class="item" v-for="(item,index) in associationBgData.bgName" :key="index">
          {{ item }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();
import { ElMessage } from 'element-plus';
//引入Echarts
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent } from 'echarts/components';
import { PieChart, BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

//引入接口
import {
  getBridgeList, //获取桥梁
  getBgPic, //获取桥梁图片
  bridgeBaseInfo, //基本信息
  bridgePortrait, //净高是否达标
  bridgeWaterwayRisk, //通航孔
  bgCbmd, //桥区船舶密度
  yawStatistics, //预警情况
  getNewWater, //水位情况
  bgWaterSit, //水位情况
  bgElevation, //设计图纸
  bridgePlan, //一桥一方案

  waterwayBaseInfo, //桥区航道基本信息
  getWaterPoint, //水位情况
  HDtheHighLow, //最高最低水位
  HDrecentOneDay, //当日水位监测
  HDbgRecentWater, //每日八时水位情况
  channelInspection, //巡检情况
  navigationSituation, //航标情况
  hdCbll, //船舶流量
  hdCbllDetail, //船舶流量详情
  associationBg, //关联桥梁
  waterwayNotice, //航道通告

  shipTonAnalys, //船舶总体态势分析
  //船舶流量态势分析
  shipllAnalys,
  shipllAnalysWeek,
  shipllAnalysMonth,
  shipllAnalysYear,
  getCenterByBg, //获取事务中心
  shipTrend, //观测船舶流量、吨位趋势及预测图

  bgModel, //获取桥梁全景
} from "@/bridge-h5/utils/bridgeAreaControlApi";

//地图
import OlArc from "./olArcManage.vue";
const OlArcRef = ref(null);

//获取桥梁
const bridge = ref("北斗大桥");
const bridgeOptions = ref([]);
const waterway = ref("沙湾水道");
const getBridgeListFn = () => {
  getBridgeList().then((res) => {
    if (res.code === 200) {
      bridgeOptions.value = res.data;
      //桥梁信息
      getBgPicFn();
      bridgeBaseInfoFn();
      bridgePortraitFn();
      bridgeWaterwayRiskFn();
      bgCbmdFn();
      yawStatisticsFn();
      getWaterOptionsFn();
      bgElevationFn();
      bridgePlanFn();
      //桥区航道
      waterwayBaseInfoFn();
      getWaterPointFn();
      channelInspectionFn();
      navigationSituationFn();
      hdCbllFn();
      // hdCbllDetailFn();
      associationBgFn();
      waterwayNoticeFn();
      //船舶通航
      shipTonAnalysFn();
      shipllAnalysFn();
      getCenterByBgFn();
      //桥梁全景
      bgModelFn();
    }
  });
};
const bridgeChange = () => {
  OlArcRef.value.getPosInfoFn(bridge.value);
  //桥梁信息
  getBgPicFn();
  bridgeBaseInfoFn();
  bridgePortraitFn();
  bridgeWaterwayRiskFn();
  bgCbmdFn();
  yawStatisticsFn();
  getWaterOptionsFn();
  bgElevationFn();
  bridgePlanFn();
  //桥区航道
  bridgeOptions.value.forEach((item) => {
    if (bridge.value === item.name) {
      waterway.value = item.hangdao;
      waterwayBaseInfoFn();
      getWaterPointFn();
      channelInspectionFn();
      navigationSituationFn();
      hdCbllFn();
      // hdCbllDetailFn();
      associationBgFn();
      waterwayNoticeFn();
    }
  });
  //船舶通航
  shipTonAnalysFn();
  shipllAnalysFn();
  getCenterByBgFn();
  //桥梁全景
  bgModelFn();
};
//获取桥梁图片
const picUrl = ref("");
const getBgPicFn = () => {
  getBgPic({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200 && res.data.picUrl) {
      picUrl.value = `${import.meta.env.VITE_APP_BASE_API}attach` + res.data.picUrl;
    } else {
      picUrl.value = "";
    }
  });
};
const imgError = () => {
  picUrl.value = "";
};
//基本信息
const bridgeBaseInfoData = ref({});
const bridgeBaseInfoFn = () => {
  bridgeBaseInfo({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200) {
      bridgeBaseInfoData.value = res.data[0];
    }
  });
};
//净高是否达标
const bridgePortraitData = ref({});
const bridgePortraitFn = () => {
  bridgePortrait({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200) {
      bridgePortraitData.value = res.data[0];
    }
  });
};
//通航孔
const bridgeHoleData = ref({});
const tonghangkong = ref([]);
const bridgeWaterwayRiskFn = () => {
  bridgeWaterwayRisk({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200) {
      bridgeHoleData.value = res.data;
      tonghangkong.value = res.data.tonghangkong;
    }
  });
};
//桥区船舶密度
const density = ref(0);
const bgCbmdFn = () => {
  bgCbmd({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200) {
      density.value = res.data[0]?.hsCbll;
    }
  });
};
//预警情况
const chaogaoAlarm = ref(0);
const chaosuAlarm = ref(0);
const pianhangAlarm = ref(0);
const yawStatisticsFn = () => {
  yawStatistics({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200) {
      chaogaoAlarm.value = res.data.total_num[0].chaogaoAlarm;
      chaosuAlarm.value = res.data.total_num[0].chaosuAlarm;
      pianhangAlarm.value = res.data.total_num[0].pianhangAlarm;

      if (earlyWarningDialogVisible.value) {
        initFifthChart1(res.data.pianhang);
        initFifthChart2(res.data.chaogao);
        initFifthChart3(res.data.chaosu);
      }
    }
  });
};
//水位情况
const water = ref("");
const waterOptions = ref([]);
const getWaterOptionsFn = () => {
  getBridgeList({
    keyword: bridge.value
  }).then((res) => {
    if (res.code === 200) {
      water.value = res.data[0].name;
      waterOptions.value = res.data;
      getNewWaterFn();
    }
  });
};
const newWaterData = ref([]);
const getNewWaterFn = () => {
  // getNewWater({
  //   waterway: water.value
  // }).then((res) => {
  //   if(res.code === 200 && res.data.length){
  //     newWaterData.value = res.data;
  //   }
  // });
  bgWaterSit({
    bridge: water.value
  }).then((res) => {
    if (res.code === 200 && res.data.length) {
      newWaterData.value = res.data;
    }
  });
};
//设计图纸/一桥一方案
const bgElevationFn = () => {
  bgElevation({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200) {

    }
  });
};
const planUrl = ref("");
const bridgePlanFn = () => {
  bridgePlan({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200 && res.data.url) {
      planUrl.value = `${import.meta.env.VITE_APP_BASE_API}` + res.data.url;
    } else {
      planUrl.value = "";
    }
  });
};
const viewPlan = () => {
  window.open(
    planUrl.value,
    "_blank",
    "toolbar=yes,location=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=600,height=600"
  )
};

//桥区航道
const waterwayBaseInfoData = ref({});
const waterwayBaseInfoFn = () => {
  waterwayBaseInfo({
    bridge: bridge.value,
    waterway: waterway.value
  }).then((res) => {
    if (res.code === 200) {
      waterwayBaseInfoData.value = res.data;
    }
  });
};
const water1 = ref("");
const waterOptions1 = ref([]);
const getWaterPointFn = () => {
  getWaterPoint({
    waterway: waterway.value
  }).then((res) => {
    if (res.code === 200 && res.data.length) {
      waterOptions1.value = res.data;
      water1.value = res.data[0].point;
      getNewWaterFn1();
    } else {
      waterOptions1.value = [];
      water1.value = "";
    }
  });
};
const getNewWaterData = ref({});
const getNewWaterFn1 = () => {
  getNewWater({
    waterway: water1.value
  }).then((res) => {
    if (res.code === 200) {
      getNewWaterData.value = res.data[0] || {};
    }
  });
};
const theHighLowData = ref([]);
const getHDtheHighLowFn = () => {
  HDtheHighLow({
    waterway: water1.value
  }).then((res) => {
    if (res.code === 200) {
      theHighLowData.value = res.data;
    }
  });
};
const xcMile = ref(0);
const xcqkData = ref({});
const xcjlData = ref([]);
const channelInspectionFn = () => {
  channelInspection({
    waterway: waterway.value
  }).then((res) => {
    if (res.code === 200) {
      xcMile.value = res.data.xcMile;
      xcqkData.value = res.data.new;
      xcjlData.value = res.data.list;
    }
  });
};
const navigationSituationData = ref({});
const navigationSituationFn = () => {
  navigationSituation({
    waterway: waterway.value
  }).then((res) => {
    if (res.code === 200) {
      navigationSituationData.value = res.data[0];
    }
  });
};
const hdCbllData = ref({});
const hdCbllFn = () => {
  hdCbll({
    waterway: waterway.value
  }).then((res) => {
    if (res.code === 200) {
      hdCbllData.value = res.data[0] || {};
    }
  });
};
const xAxisData1 = ref([]);
const seriesData1 = ref([]);
const xAxisData2 = ref(0);
const seriesData2 = ref(0);
const xAxisData3 = ref([]);
const seriesData3 = ref([]);
const xAxisData4 = ref([]);
const seriesData4 = ref([]);
const hdCbllDetailFn = () => {
  shipFlowDialogVisible.value = true;
  hdCbllDetail({
    waterway: waterway.value
  }).then((res) => {
    let data = res.data;
    xAxisData1.value = [];
    seriesData1.value = [];
    xAxisData2.value = 0;
    seriesData2.value = 0;
    xAxisData3.value = [];
    seriesData3.value = [];
    xAxisData4.value = [];
    seriesData4.value = [];
    if (res.code === 200) {
      xAxisData1.value = [data.bzRate];
      seriesData1.value = [data.thDetail];
      data.cbll?.forEach((item1) => {
        xAxisData1.value.push(item1.ny);
        seriesData1.value.push(item1.temperature);
        xAxisData2.value += item1.dayu;
        seriesData2.value += item1.xiaoyu;
        xAxisData3.value.push(item1.gcdMc);
        seriesData3.value.push(item1.shipNum);
        xAxisData4.value.push(item1.gcdMc);
        seriesData4.value.push(item1.totalDw);
      });
    }
    nextTick(() => {
      initSeventhChart1();
      initSeventhChart2();
      initSeventhChart3();
      initSeventhChart4();
    });
  })
};
const associationBgData = ref({});
const associationBgFn = () => {
  associationBg({
    waterway: waterway.value
  }).then((res) => {
    if (res.code === 200) {
      associationBgData.value = res.data;
    }
  });
};
//航道通告
const waterwayNoticeData = ref([]);
const waterwayNoticeFn = () => {
  waterwayNotice({
    waterway: waterway.value
  }).then((res) => {
    if (res.code === 200) {
      waterwayNoticeData.value = res.data;
    }
  });
};
const seeNotice = (contents) => {
  let reg = /<a[^>]+href\s*=\s*['"]([^"']+)['"][^>]*>/gi;
  if (contents.match(reg)) {
    window.open(`${import.meta.env.VITE_APP_BASE_API}notice${contents.match(reg)[0].slice(25, -2)}`);
  } else {
    let matchReg = /<img.*?(?:>|\/>)/gi;
    let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
    let data = [];
    let arr = contents.match(matchReg);
    arr.forEach(item => {
      let src = item.match(srcReg);
      data.push(`${import.meta.env.VITE_APP_BASE_API}notice${src[1]}`);
    });

    router.push({
      path: "/pdf",
      query: { content: data.join(',') },
    });
  }
};

//船舶总体态势分析
const radio1 = ref("当周");
const totalShip = ref(0);
const totalShipLoad = ref(0);
const shipTonAnalysData = ref({});
const shipTonAnalysFn = () => {
  shipTonAnalys({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200) {
      shipTonAnalysData.value = res.data;
      radio1Change();
    }
  });
};
const radio1Change = () => {
  let obj = {};
  if (radio1.value === "当日") {
    totalShip.value = shipTonAnalysData.value.today.totalShip;
    totalShipLoad.value = shipTonAnalysData.value.today.dw;
    obj = shipTonAnalysData.value.today;
  } else if (radio1.value === "当周") {
    totalShip.value = shipTonAnalysData.value.thisWeek.totalShip;
    totalShipLoad.value = shipTonAnalysData.value.thisWeek.dw;
    obj = shipTonAnalysData.value.thisWeek;
  } else if (radio1.value === "当月") {
    totalShip.value = shipTonAnalysData.value.thisMonth.totalShip;
    totalShipLoad.value = shipTonAnalysData.value.thisMonth.dw;
    obj = shipTonAnalysData.value.thisMonth;
  } else if (radio1.value === "当年") {
    totalShip.value = shipTonAnalysData.value.thisYear.totalShip;
    totalShipLoad.value = shipTonAnalysData.value.thisYear.dw;
    obj = shipTonAnalysData.value.thisYear;
  }
  initFirstChart(obj);
};
const initFirstChart = (obj) => {
  nextTick(() => {
    let data = [
      { name: '0-500吨', value: obj.ton1, itemStyle: { color: '#0051FF' } },
      { name: '500-1000吨', value: obj.ton2, itemStyle: { color: '#2A8BFD' } },
      { name: '1000-1500吨 ', value: obj.ton3, itemStyle: { color: '#66D88A' } },
      { name: '1500-2000吨', value: obj.ton4, itemStyle: { color: '#CB1EE8' } },
      { name: '2000-3000吨', value: obj.ton5, itemStyle: { color: '#9B58EE' } },
      { name: '3000吨以上', value: obj.ton6, itemStyle: { color: '#00FFFF' } },
    ];

    let pieChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById('first-chart'));
    let option = {
      legend: {
        // type: 'scroll',
        itemWidth: 8,
        itemHeight:8,
      },
      tooltip: {
        trigger: 'item',
        confine: true, //限制在图表区域内   
      },
      series: [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          center:['50%','60%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          labelLine: {
            show: true, //标签连接线
          },
          data: data
        }
      ],
    };
    option && pieChart.setOption(option);
  });
};
//船舶流量态势分析  
const count = ref("1");
const countOptions = [
  { name: "上下行船舶统计", value: "1" },
  { name: "空重载船舶统计", value: "2" },
];
const radio2 = ref("当周");
const shipllAnalysFn = () => {
  if (radio2.value === "当日") {
    shipllAnalys({
      bridge: bridge.value,
      type: count.value
    }).then((res) => {
      if (res.code === 200) {
        initSecondChart(res.data);
      }
    });
  } else if (radio2.value === "当周") {
    shipllAnalysWeek({
      bridge: bridge.value,
      type: count.value
    }).then((res) => {
      if (res.code === 200) {
        initSecondChart(res.data);
      }
    });
  } else if (radio2.value === "当月") {
    shipllAnalysMonth({
      bridge: bridge.value,
      type: count.value
    }).then((res) => {
      if (res.code === 200) {
        initSecondChart(res.data);
      }
    });
  } else if (radio2.value === "当年") {
    shipllAnalysYear({
      bridge: bridge.value,
      type: count.value
    }).then((res) => {
      if (res.code === 200) {
        initSecondChart(res.data);
      }
    });
  }
};
const initSecondChart = (data) => {
  let xAxisData = [];
  let seriesData1 = [];
  let seriesData2 = [];

  data.forEach((item) => {
    xAxisData.push(item.tgsj);
    if (count.value == 1) {
      seriesData1.push(item.up);
      seriesData2.push(item.down);
    } else {
      seriesData1.push(item.zhongdai);
      seriesData2.push(item.kongzai);
    }
  });

  let chart = echarts.getInstanceByDom(document.getElementById("second-chart"));
  if (chart != null && chart != "" && chart != undefined) {
    chart.dispose();
  }
  chart = echarts.init(document.getElementById('second-chart'));
  let option;
  if (xAxisData.length === 0) {
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          fontSize: 16,
          fontWeight: 800
        }
      }
    };
  } else {
    option = {
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: "shadow",
        },
        confine: true, //限制在图表区域内
      },
      legend: {

      },
      grid: {
        top: "20%",
        left: "10%",
        right: "15%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          startValue: 0,
          endValue: 6,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          name: "",
          data: xAxisData,
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            interval: 0,
          },
          axisPointer: {
            show: true,
            type: 'none',
            label: {
              show: false,
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "船舶流量（艘）",
          nameGap: 15,
          axisLabel: {
            interval: 0,
          },
          splitLine: {
            show: true,
          }
        },
      ],
      series: [
        {
          name: count.value == 1 ? "上行" : "重载",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: '15%',
          color: "#0051FF",
          data: seriesData1,
        },
        {
          name: count.value == 1 ? "下行" : "空载",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: '15%',
          color: "#66D88A",
          data: seriesData2,
        },
      ],
    };
  }

  option && chart.setOption(option);
};
//观测船舶趋势及预测图
const type = ref("1");
const typeOptions = [
  { name: "观测船舶流量趋势及预测图", value: "1" },
  { name: "观测船舶吨位趋势及预测图", value: "2" },
];
const radio3 = ref("日");
const radio4 = ref("日");
const bmpName = ref("");
const getCenterByBgFn = () => {
  getCenterByBg({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200) {
      bmpName.value = res.data[0].bmPname;
      shipTrendFn();
    }
  });
};
const shipTrendFn = () => {
  shipTrend({
    bridge: bridge.value,
    bmpName: bmpName.value
  }).then((res) => {
    if (res.code === 200) {
      initThirdChart(res.data.ship);
      initFourthChart(res.data.tonnage);
    }
  });
};
const initThirdChart = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    if (radio3.value == "日") {
      xAxisData = data.day1;
      seriesData = [
        {
          name: '实际',
          data: data.num,
          type: 'line',
          itemStyle: {
            color: '#0051FF'
          },
        },
      ];
    } else if (radio3.value == "月") {
      xAxisData = data.month1.actualMonth;
      seriesData = [
        {
          name: '实际',
          data: data.month1.actual,
          type: 'line',
          itemStyle: {
            color: '#0051FF'
          },
        },
        {
          name: '预测值',
          data: data.month1.forcast,
          type: 'line',
          itemStyle: {
            color: '#FFC733'
          },
        }
      ];
    }
    let lineChart = echarts.getInstanceByDom(document.getElementById("third-chart"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById('third-chart'));

    let option;
    if (xAxisData.length === 0) {
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    } else {
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        legend: {

        },
        grid: {
          top: '40px',
          left: '50px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '单位（万艘）',
          splitLine: {
            show: true,
          }
        },
        series: seriesData
      };
    }
    option && lineChart.setOption(option);
  });
};
const initFourthChart = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    if (radio4.value == "日") {
      xAxisData = data.day1;
      seriesData = [
        {
          name: '实际',
          data: data.num,
          type: 'line',
          itemStyle: {
            color: '#0051FF'
          },
        },
      ];
    } else if (radio4.value == "月") {
      xAxisData = data.month1.actualMonth;
      seriesData = [
        {
          name: '实际',
          data: data.month1.actual,
          type: 'line',
          itemStyle: {
            color: '#0051FF'
          },
        },
        {
          name: '预测值',
          data: data.month1.forcast,
          type: 'line',
          itemStyle: {
            color: '#FFC733'
          },
        }
      ];
    }
    let lineChart = echarts.getInstanceByDom(document.getElementById("fourth-chart"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById('fourth-chart'));

    let option;
    if (xAxisData.length === 0) {
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    } else {
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        legend: {

        },
        grid: {
          top: '40px',
          left: '50px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '单位（万吨）',
          splitLine: {
            show: true,
          }
        },
        series: seriesData
      };
    }
    option && lineChart.setOption(option);
  });
};

//弹窗
const baseInfoDialogVisible = ref(false);
const earlyWarningDialogVisible = ref(false);
const initFifthChart1 = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.month);
      seriesData.push(item.times);
    });
    let lineChart = echarts.getInstanceByDom(document.getElementById("fifth-chart1"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById('fifth-chart1'));

    let option;
    if (xAxisData.length === 0) {
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    } else {
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '45px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '船舶数量（艘）',
          splitLine: {
            show: true,
          }
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          }
        ]
      };
    }
    option && lineChart.setOption(option);
  });
};
const initFifthChart2 = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.month);
      seriesData.push(item.times);
    });
    let lineChart = echarts.getInstanceByDom(document.getElementById("fifth-chart2"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById('fifth-chart2'));

    let option;
    if (xAxisData.length === 0) {
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    } else {
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '45px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '船舶数量（艘）',
          splitLine: {
            show: true,
          }
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          }
        ]
      };
    }
    option && lineChart.setOption(option);
  });
};
const initFifthChart3 = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.month);
      seriesData.push(item.times);
    });
    let lineChart = echarts.getInstanceByDom(document.getElementById("fifth-chart3"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById('fifth-chart3'));

    let option;
    if (xAxisData.length === 0) {
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    } else {
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '45px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '船舶数量（艘）',
          splitLine: {
            show: true,
          }
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          }
        ]
      };
    }
    option && lineChart.setOption(option);
  });
};
const channelBaseInfoDialogVisible = ref(false);
const waterLevelDialogVisible = ref(false);
const openWaterLevelDialog = () => {
  waterLevelDialogVisible.value = true;
  getNewWaterFn1();
  getHDtheHighLowFn();
  hdRecentOneDayFn();
  hdbgRecentWaterFn();
};
const water1Change = () => {
  getNewWaterFn1();
  getHDtheHighLowFn();
  hdRecentOneDayFn();
  hdbgRecentWaterFn();
};
const hdRecentOneDayFn = () => {
  HDrecentOneDay({
    waterway: water1.value
  }).then((res) => {
    if (res.code === 200) {
      initSixthChart1(res.data);
    }
  });
};
const hdbgRecentWaterFn = () => {
  HDbgRecentWater({
    waterway: water1.value
  }).then((res) => {
    if (res.code === 200) {
      initSixthChart2(res.data);
    }
  });
};
const initSixthChart1 = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.time.slice(11, 16));
      seriesData.push(item.swz);
    });
    let lineChart = echarts.getInstanceByDom(document.getElementById("sixth-chart1"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById('sixth-chart1'));

    let option;
    if (xAxisData.length === 0) {
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    } else {
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '45px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '水位（m）',
          splitLine: {
            show: true,
          }
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          }
        ]
      };
    }
    option && lineChart.setOption(option);
  });
};
const initSixthChart2 = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.time);
      seriesData.push(item.swz);
    });
    let lineChart = echarts.getInstanceByDom(document.getElementById("sixth-chart2"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById('sixth-chart2'));

    let option;
    if (xAxisData.length === 0) {
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    } else {
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '45px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '水位（m）',
          splitLine: {
            show: true,
          }
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          }
        ]
      };
    }
    option && lineChart.setOption(option);
  });
};
const shipFlowDialogVisible = ref(false);
const echartlist = ref([
  {
    value: 0,
    name: "3000吨以上船舶",
    color: "#0051FF",
  },
  {
    value: 0,
    name: "3000吨以下船舶",
    color: "#66D88A",
  },
]);
const initSeventhChart1 = () => {
  let pieChart = echarts.getInstanceByDom(
    document.getElementById("seventh-chart1")
  );
  if (pieChart != null && pieChart != "" && pieChart != undefined) {
    pieChart.dispose();
  }
  pieChart = echarts.init(document.getElementById("seventh-chart1"));

  let option;
  let echartlist = [
    {
      value: 100 - xAxisData1.value[0],
      color: "#f1f3f4",
    },
    {
      value: xAxisData1.value[0],
      color: "#0051FF",
    },
  ];
  let color = [
    [
      { offset: 0, color: "#f1f3f4" },
      { offset: 1, color: "#f1f3f4" },
    ],
    [
      { offset: 0, color: "#0051FF" },
      { offset: 1, color: "#0051FF" },
    ],
  ];
  echartlist.forEach((item, index) => {
    item.itemStyle = {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color[index]),
    };
  });
  option = {
    color,
    title: {
      text: "通航保障率",
      subtext: xAxisData1.value[0] + "%" || "0",
      textStyle: {
        color: "#595959",
        fontSize: 12,
        align: "center",
      },
      subtextStyle: {
        fontSize: 21,
        color: "#165DFF",
      },
      x: "center",
      y: "40%",
    },

    tooltip: {
      trigger: "item",
      show: false,
    },
    series: [
      {
        type: "pie",
        minAngle: 5,
        startAngle: 10, //起始角度
        labelLine: {
          show: true,
          length: 20,
          length2: 10,
          lineStyle: {
            width: 2,
          },
        },
        label: {
          show: false,
        },
        center: ["50%", "50%"],
        radius: ["55%", "70%"],
        data: echartlist,
      },
    ],
  };
  option && pieChart.setOption(option);
};
const initSeventhChart2 = () => {
  let pieChart = echarts.getInstanceByDom(
    document.getElementById("seventh-chart2")
  );
  if (pieChart != null && pieChart != "" && pieChart != undefined) {
    pieChart.dispose();
  }
  pieChart = echarts.init(document.getElementById("seventh-chart2"));

  let option;
  echartlist.value = [
    {
      value: xAxisData2.value,
      name: "3000吨以上船舶",
      color: "#0051FF",
    },
    {
      value: seriesData2.value,
      name: "3000吨以下船舶",
      color: "#66D88A",
    },
  ];
  let color = [
    [
      { offset: 0, color: "#0051FF" },
      { offset: 1, color: "#0051FF" },
    ],
    [
      { offset: 0, color: "#66D88A" },
      { offset: 1, color: "#66D88A" },
    ],
  ];
  echartlist.value.forEach((item, index) => {
    item.itemStyle = {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color[index]),
    };
  });
  option = {
    color,
    tooltip: {
      trigger: "item",
      show: true,
    },
    legend: {

    },
    series: [
      {
        type: "pie",
        minAngle: 5,
        startAngle: 10, //起始角度
        labelLine: {
          show: true,
          length: 20,
          length2: 10,
          lineStyle: {
            width: 2,
          },
        },
        label: {
          show: false,
        },
        center: ["50%", "50%"],
        radius: ["55%", "70%"],
        data: echartlist.value,
      },
    ],
  };
  option && pieChart.setOption(option);
};
const initSeventhChart3 = () => {
  let barChart = echarts.getInstanceByDom(
    document.getElementById("seventh-chart3")
  );
  if (barChart != null && barChart != "" && barChart != undefined) {
    barChart.dispose();
  }
  barChart = echarts.init(document.getElementById("seventh-chart3"));

  let option;
  if (xAxisData3.value.length === 0) {
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          fontSize: 16,
          fontWeight: 800
        }
      }
    };
  } else {
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      axisPointer: {
        type: "shadow",
      },
      legend: {

      },
      grid: {
        top: "60px",
        left: "45px",
        right: "40px",
        bottom: "55px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          startValue: 0,
          endValue: 9,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        data: xAxisData3.value,
        axisLabel: {
          interval: 0,
        },
      },
      yAxis: {
        type: "value",
        name: '船舶数量（艘）',
      },
      series: [
        {
          name: "船舶数量",
          data: seriesData3.value,
          type: "bar",
          barWidth: 10,
          color: "#0051FF",
        },
      ],
    };
  }
  option && barChart.setOption(option);
};
const initSeventhChart4 = () => {
  let barChart = echarts.getInstanceByDom(
    document.getElementById("seventh-chart4")
  );
  if (barChart != null && barChart != "" && barChart != undefined) {
    barChart.dispose();
  }
  barChart = echarts.init(document.getElementById("seventh-chart4"));

  let option;
  if (xAxisData4.value.length === 0) {
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          fontSize: 16,
          fontWeight: 800
        }
      }
    };
  } else {
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      axisPointer: {
        type: "shadow",
      },
      legend: {

      },
      grid: {
        top: "60px",
        left: "70px",
        right: "40px",
        bottom: "55px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          startValue: 0,
          endValue: 9,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        data: xAxisData4.value,
        axisLabel: {
          interval: 0,
        },
      },
      yAxis: {
        type: "value",
        name: "船舶吨位（吨）"
      },
      series: [
        {
          name: "船舶吨位",
          data: seriesData4.value,
          type: "bar",
          barWidth: 10,
          color: "#0051FF",
        },
      ],
    };
  }
  option && barChart.setOption(option);
};
const routingInspectionDialogVisible = ref(false);
const isShowDetails = ref(false);
const details = ref({});
const detailsFn = (row) => {
  details.value = row;
  isShowDetails.value = true;
};
const associatedBridgeDialogVisible = ref(false);

//获取桥梁全景
const haveLink = ref("");
const bgModelFn = () => {
  bgModel({
    bridge: bridge.value
  }).then((res) => {
    if (res.code === 200 && res.data.link) {
      haveLink.value = res.data.link;
    } else {
      haveLink.value = "";
    }
  });
};
const goLink = () => {
  window.open(haveLink.value);
};

onMounted(() => {
  document.title = "水上桥区管控";
  getBridgeListFn();
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: Din;
  src: url("../../assets/fonts/din.ttf");
}
@font-face {
  font-family: Tx;
  src: url("../../assets/fonts/tx.ttf");
}
.container {
  width: 1920px;
  height: 1080px;
  box-sizing: content-box;
  .header {
    height: 40px;
    width: 2500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
    border-radius: 57px;
    // background-color:#d0e7fe;
    background: linear-gradient(to right, #d0e7fe, #d0e7fe3b);
    margin: 16px 16px 0px 16px;
    padding: 0 16px;
    .title {
      // font-family: "Tx";
      font-weight: bold;
      font-weight: 1000 !important;
      font-size: 21px;
      color: rgba(105, 161, 247, 255);
    }
    .menu {
      display: flex;
      align-items: center;
      .item {
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        padding: 6px 18px;
        border-radius: 4px;
      }
      .active {
        color: #ffffff;
        background: #0051ff;
      }
    }
  }
  .main {
    box-sizing: content-box;
    height: 1024px;
    margin: 16px;
    display: flex;
    .left-content {
      width: 620px;
      height: 1174px;
      box-sizing: content-box;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
      border-radius: 0px 0px 4px 4px;
      .title {
        height: 48px;
        // background: linear-gradient(
        //   90deg,
        //   rgba(215, 227, 255, 0.4) 0%,
        //   #d7e3ff 100%
        // );
        font-weight: 500;
        font-size: 18px;
        color: #262626;
        line-height: 48px;
        padding-left: 16px;
      }
      .subtitle {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        border-bottom: 1px solid #f0f0f0;
        .name {
          font-weight: 500;
          color: #3f91f0;
          font-size: 17px;
          font-weight: bold;
          margin-left: -14px;
          white-space: nowrap;
        }
        .line {
          width: 4px;
          height: 20px;
          background-color: #318bf2;
          margin-right: 18px;
        }
        .more {
          font-weight: 400;
          font-size: 14px;
          color: #0051ff;
        }
      }
      .image {
        height: 164px;
        box-sizing: content-box;
        margin: 8px 16px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .no-image {
          height: 164px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 68px;
            height: 68px;
          }
          .name {
            font-weight: 500;
            font-size: 16px;
            color: #262626;
            margin-top: 8px;
          }
        }
        .btn {
          text-align: center;
          font-weight: 400;
          font-size: 14px;
          padding: 4px 8px;
          border-radius: 4px;
          color: #ffffff;
          background: #0051ff;
          position: absolute;
          top: 0px;
          right: 0px;
        }
      }
      .base-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0px 16px;
        .left-info {
          .name {
            font-weight: 600;
            font-size: 18px;
            color: #262626;
          }
          .address {
            font-weight: 500;
            font-size: 16px;
            color: #595959;
            display: flex;
            align-items: center;
            .text {
              font-weight: 400;
              font-size: 14px;
              color: #595959;
            }
            .value {
              font-weight: 500;
              font-size: 14px;
              color: #262626;
            }
          }
        }
        .right-info {
          display: flex;
          align-items: center;
          .name {
            font-weight: 400;
            font-size: 16px;
            color: #595959;
          }
          .value {
            font-weight: 500;
            font-size: 14px;
            color: #28ce8e;
          }
        }
      }
      .hole-info {
        height: 204px;
        margin: 0px 16px;
        .hole-item {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #f0f0f0;
          padding: 16px 0;
          font-size: 14px;
          .name {
            font-weight: bold;
            font-size: 15px;
            color: #595959;
          }
          .value {
            font-family: "Din";
            font-weight: bold;
            font-size: 18px;
            color: #262626;
          }
        }
      }
      .count-info {
        display: flex;
        margin: 10px;
        margin-top: 47px;
        .count-item {
          height: 136px;
          background: #ffffff;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
          border-radius: 4px;
          border: 1px solid #f0f0f0;
          .top {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            .name {
              font-weight: bold;
              font-size: 16px;
              color: #595959;
            }
            .more {
              font-weight: 400;
              font-size: 14px;
              color: #0051ff;
            }
          }
          .bottom {
            height: 95px;
            display: flex;
            justify-content: center;
            align-items: center;
            .bottom-item {
              text-align: center;
              margin-left: -8px;
              .value {
                font-family: "Din";
                font-size: 20px;
                font-weight: bold;
                color: #262626;
                margin-top: 4px;
              }
              .name {
                font-weight: bold;
                font-size: 15px;
                color: #595959;
              }
            }
            .w33 {
              width: 33.33%;
            }
            .br1 {
              border-right: 1px solid #f0f0f0;
            }
          }
        }
      }
      .water-info {
        height: 89px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: #f8f9fb;
        margin: 8px 16px 16px 16px;
        .water-level {
          color: #262626;
          font-size: 21px;
          font-weight: bold;
          margin-bottom: 5px;
          .value {
            font-family: "Din";
          }
        }
        .tips {
          font-weight: 400;
          font-size: 15px;
          color: #595959;
        }
        .update-time {
          font-weight: 400;
          font-size: 15px;
          color: #595959;
        }
      }
      .blueprint {
        display: flex;
        margin: 0 16px;
        .blueprint-item {
          width: 50%;
          height: 44px;
          background: #ffffff;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
          border-radius: 4px;
          border: 1px solid #f0f0f0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            display: flex;
            align-items: center;
            margin-left: 16px;
            div {
              font-weight: 500;
              font-size: 18px;
              color: #262626;
              margin-left: 4px;
            }
          }
        }
      }
    }
    .middle-content {
      width: 928px;
      height: 1174px;
      margin: 0 16px;
      box-sizing: content-box;
      position: relative;
      .map {
        height: 438px;
        margin-bottom: 16px;
        position: relative;
        .choose {
          position: absolute;
          top: 16px;
          left: 16px;
        }
      }
      .title {
        font-weight: 500;
        color: #3f91f0;
        font-size: 17px;
        font-weight: bold;
        margin-left: -14px;
        white-space: nowrap;
      }
      .line {
        width: 4px;
        height: 20px;
        background-color: #318bf2;
        margin-right: 18px;
      }
      .info {
        height: 264px;
        margin-left: -40px;
        border-color: rgba(125, 185, 228, 0.41);
        box-shadow: inset 0px -1px 0px 0px #f0f0f0;
        border-radius: 0px 0px 4px 4px;
        box-sizing: content-box;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16px;

        .info-item {
          width: 342px;
          height: 110px;
          background-color: rgb(252, 252, 252);
    border-radius: 10px;
    border: 2px solid rgba(128, 128, 128, 0.08);
          .item-title {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid #f0f0f0;
            .name {
              font-size: 18px;
              font-weight: bold;
              color: #595959;
            }
            .more {
              font-weight: 400;
              font-size: 14px;
              color: #0051ff;
            }
            .point {
              width: 120px;
              white-space: nowrap;
              border-radius: 4px;
              color: #595959;
              font-size: 15px;
              padding: 5px 13px;
              margin-left: 78px;
              position: absolute;
            }
          }
          .first-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 8px 32px 4px 32px;
            .top {
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              margin-bottom: 4px;
              width: 82px;
              margin-left: 27px;
              .name{
                font-size: 16px;
                font-weight: bold;
                color: #595959;
              }
              .value{
                font-size: 21px;
                font-weight: bold;
                color: #262626;
                margin-top: 8px;
                margin-left: 12px;
              }
            }
            .bottom {
              text-align: center;
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              margin-top: -68px;
              margin-left: 163px;
              .name{
                font-size: 16px;
                font-weight: bold;
                color: #595959;
                margin-top: 8px;
              }
              .value{
                font-size: 21px;
                font-weight: bold;
                color: #262626;
                margin-top: 8px;
              }
            }
          }
          .second-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 13px 16px;
            .name {
              font-weight: 700;
              margin-top: -7px;
               font-size: 15px;
              color: #595959;
            }
            .value {
              font-family: "Din";
              font-weight: bold;
              font-size: 22px;
              margin-top: 10px;
              margin-left: 30px;
              color: #262626;
            }
          }
          .third-info {
            .water-level {
              font-family: "Din";
              font-weight: 600;
              font-size: 24px;
              color: #262626;
              text-align: center;
              margin-top: 8px;
            }
            .tips {
              display: flex;
              justify-content: space-around;
              font-weight: 400;
              font-size: 16px;
              color: #595959;
              margin-top: 4px;
            }
          }
          .fourth-info {
            display: flex;
            justify-content: center;
            margin-top: 18px;
            .name {
              font-weight: 600;
              font-size: 22px;
              color: #333333;
            }
            .value {
              font-family: "Din";
              font-weight: bold;
              font-size: 22px;
              color: #262626;
            }
          }
          .fifth-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 13px 16px;
            .name {
              font-weight: 900;
              font-size: 15px;
              margin-top: -6px;
              color: #595959;
            }
            .value {
              font-family: "Din";
              font-weight: bold;
              font-size: 21px;
              color: #262626;
              margin-top: 5px;
              margin-left: 2px;
            }
          }
          .sixth-info {
            display: flex;
            justify-content: center;
            margin: 18px 0px 19px 0px;
            .value {
              font-family: "Din";
              font-weight: bold;
              font-size: 24px;
              color: #262626;
            }
          }
        }
      }
      .notice-list {
        height: 142px;
    overflow-y: auto;
    box-shadow: inset 0px -1px 0px 0px #f0f0f0;
    border-color: rgba(125, 185, 228, 0.41);
        box-shadow: inset 0px -1px 0px 0px #f0f0f0;
        border-radius: 0px 0px 4px 4px;
        .notice-item {
          font-weight: 400;
          font-size: 17px;
          color: #262626;
          padding: 16px 0;
          margin: 0 16px;
          border-bottom: 1px solid #f0f0f0;
        }
        .no-list {
          text-align: center;
          line-height: 162px;
          font-weight: 400;
          font-size: 14px;
          color: #262626;
        }
      }
    }
    .right-content {
      width: 620px;
      margin-left: 330px;
      height: 992px;
      box-sizing: content-box;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
      border-radius: 0px 0px 4px 4px;
      .title {
        height: 48px;
        // background: linear-gradient(
        //   90deg,
        //   rgba(215, 227, 255, 0.4) 0%,
        //   #d7e3ff 100%
        // );
        font-weight: 500;
        font-size: 18px;
        color: #262626;
        line-height: 48px;
        padding-left: 16px;
      }
      .subtitle {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        border-bottom: 1px solid #f0f0f0;
        .name {
          font-weight: 500;
          color: #3f91f0;
          font-size: 17px;
          font-weight: bold;
          margin-left: -14px;
          white-space: nowrap;
        }
        .line {
          width: 4px;
          height: 20px;
          background-color: #318bf2;
          margin-right: 18px;
        }
      }
      .item {
        height: 266px;
        .count {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-left: 16px;
          .count-info {
            width: 40%;
            margin-left: 30px;
            .count-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-right: 24px;
              .name {
                font-weight: bold;
                font-size: 15px;
                color: #595959;
              }
              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 24px;
                color: #262626;
                margin-left: 34px;
              }
            }
          }
        }
        .radio-group {
          height: 50px;
          line-height: 50px;
          text-align: center;
        }
      }
    }
  }
  .my-dialog {
    .base-info-list {
      .list-item {
        display: flex;
        justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid #f0f0f0;
      }
    }
    .view-chart {
      display: flex;
      flex-wrap: wrap;
      margin-top: 8px;
      .chart {
        box-sizing: border-box;
        width: 50%;
        position: relative;
        .name {
          font-weight: 500;
          font-size: 16px;
          color: #262626;
          position: relative;
          padding-left: 12px;
        }
        .name::before {
          content: "";
          background-color: #0051ff;
          position: absolute;
          top: 55%;
          left: 0;
          height: 16px;
          width: 4px;
          transform: translateY(-50%);
        }
        .value {
          font-weight: 500;
          font-size: 12px;
          color: #28ce8e;
          position: absolute;
          left: 130px;
          bottom: 10px;
        }
        #fifth-chart1,
        #fifth-chart2,
        #fifth-chart3,
        #seventh-chart1,
        #seventh-chart2,
        #seventh-chart3,
        #seventh-chart4 {
          height: 240px;
        }
      }
    }
    .water-level-condition {
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        .tips {
          font-weight: 400;
          font-size: 12px;
          color: #595959;
        }
      }
      .count {
        display: flex;
        margin: 16px 0;
        .left-part {
          width: 338px;
          height: 94px;
          background: #f8f9fb;
          margin-right: 16px;
          .water-value {
            font-family: "Din";
            font-weight: bold;
            font-size: 24px;
            color: #0051ff;
            text-align: center;
            margin-top: 17px;
          }
          .update-time {
            font-weight: 400;
            font-size: 12px;
            color: #595959;
            text-align: center;
            margin-top: 8px;
          }
        }
        .right-part {
          width: 678px;
          height: 94px;
          background: #f8f9fb;
          display: flex;
          .item {
            width: 50%;
            margin: 16px 0;
            .water-info {
              display: flex;
              align-items: center;
              margin: 0px 0px 8px 16px;
              img {
                width: 24px;
                height: 24px;
                padding-right: 4px;
              }
              .name {
                font-weight: 500;
                font-size: 24px;
                color: #262626;
              }
              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 24px;
                color: #0051ff;
              }
            }
            .time {
              display: flex;
              align-items: center;
              font-weight: 400;
              font-size: 12px;
              color: #595959;
              margin-left: 16px;
              img {
                padding-right: 4px;
              }
            }
          }
        }
      }
      .line-chart {
        display: flex;
        .chart {
          width: 50%;
          .name {
            font-weight: 500;
            font-size: 16px;
            color: #262626;
            position: relative;
            padding-left: 12px;
          }
          .name::before {
            content: "";
            background-color: #0051ff;
            position: absolute;
            top: 55%;
            left: 0;
            height: 16px;
            width: 4px;
            transform: translateY(-50%);
          }
          #sixth-chart1,
          #sixth-chart2 {
            height: 240px;
          }
        }
      }
    }
    .routing-inspection {
      display: flex;
      flex-wrap: wrap;
      margin-top: 8px;
      box-sizing: content-box;
      .item {
        width: 49%;
        padding: 16px;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        box-sizing: border-box;
        margin-bottom: 16px;
        .name {
          font-weight: 500;
          font-size: 16px;
          color: #262626;
          position: relative;
          padding-left: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .back {
            display: flex;
            align-items: center;
            border-radius: 4px;
            border: 1px solid #0051ff;
            font-weight: 400;
            font-size: 14px;
            color: #0051ff;
            padding: 4px 16px;
            img {
              padding-right: 4px;
            }
          }
        }
        .name::before {
          content: "";
          background-color: #0051ff;
          position: absolute;
          top: 55%;
          left: 0;
          height: 16px;
          width: 4px;
          transform: translateY(-50%);
        }
        .count {
          .top-part {
            display: flex;
            background: #f8f9fb;
            padding: 16px 0;
            margin: 8px 0;
            .top-item {
              width: 25%;
              padding-left: 16px;
              .top-name {
                font-weight: 400;
                font-size: 14px;
                color: #262626;
              }
              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 24px;
                color: #0051ff;
              }
            }
            .br1 {
              border-right: 1px solid #d9d9d9;
            }
          }
          .bottom-part {
            display: flex;
            background: #f8f9fb;
            padding: 18px 0;
            margin-bottom: 8px;
            .bottom-item {
              width: 50%;
              display: flex;
              align-items: center;
              padding-left: 16px;
              .name {
                font-weight: 400;
                font-size: 14px;
                color: #262626;
              }
              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 24px;
                color: #28ce8e;
                padding-left: 40px;
              }
            }
            .br1 {
              border-right: 1px solid #d9d9d9;
            }
          }
        }
        .info {
          margin-top: 8px;

          .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .info-name {
              font-weight: 400;
              font-size: 14px;
              color: #262626;
            }
            .value {
              font-weight: 400;
              font-size: 14px;
              color: #595959;
            }
          }
        }
        .table {
          .btn {
            font-weight: 400;
            font-size: 14px;
            color: #165dff;
          }
        }
      }
    }
    .associated-list {
      margin: 8px 0;
      .item {
        background: #f8f9fb;
        border-radius: 4px;
        padding: 8px;
        margin-bottom: 16px;
      }
    }
  }
}
:deep(.el-dialog__header) {
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-select) {
  width: 200px;
}

</style>